import React, {useCallback, useEffect, useRef, useState} from 'react';
import 'antd/dist/antd.css';
import flvJs from 'flv.js';
import { connect } from 'umi';

@connect(({ cameraLive, loading }) => ({
  cameraLive,
  loading: loading.models.cameraLive,
}))
class CameraPlayer extends Component {
  const [isPlay, setIsPlay] = useState(false);
  const flvRef = useRef<flvJs.Player>();
  const videoRef = useRef<HTMLVideoElement>(null);

  constructor(props) {
    super(props);
    this.state ={
      videoId: this.randomString(8),
      wasmPlayer: null,
      videoDetail:{}
    }
  }
  randomString(e) {
    e = e || 32;
    var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
      a = t.length,
      n = "";
    for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
    return n
  }

  componentDidMount(){



  }

  componentDidUpdate(prevProps, prevState) {
    if(this.props.liveData && (this.props.history === undefined || this.props.history === false)){
      if(this.props.liveData.channelId !== prevProps.liveData.channelId){
        this.starLive(this.props.liveData)
      }
    }else if(this.props.recordTime !==null){
      console.log(prevProps.recordTime)
      console.log(this.props.recordTime)
      if(prevProps.recordTime ===null){
        this.starRecordLive();
      }else if(this.props.recordTime.startTime !== prevProps.recordTime.startTime){
        this.starRecordLive();
      }
    }
  }

  componentWillUnmount() {
    this.state.wasmPlayer.destroy();
  }

  // componentWillReceiveProps(nextProps) {
  //   this.starLive(nextProps.liveData)
  // }

  startPlay(liveUrl){
    this.state.wasmPlayer.destroy();
    const newWasmPlayer = new WasmPlayer(
      null,
      this.state.videoId,
      this.callbackfun,{
        Height:true
      })
    newWasmPlayer.play(liveUrl,1);
    this.setState({
      wasmPlayer: newWasmPlayer,
    })
  }

  starRecordLive(){
    const { dispatch,liveData,recordTime} = this.props;
    const that = this;
    dispatch({
      type: 'cameraLive/playbackStart',
      payload: {
        deviceId: liveData.deviceId,
        channelId: liveData.channelId,
        startTime: recordTime.startTime,
        endTime: recordTime.endTime,
      },
    }).then((res)=>{
      if(res instanceof String){

      }else{
        that.startPlay(res.flv);
      }
    })
  }

  starLive(liveData){
    const { dispatch } = this.props;
    if(liveData.channelId){
      const that = this;
      dispatch({
        type: 'cameraLive/starLive',
        payload: {
          deviceId: liveData.deviceId,
          channelId: liveData.channelId,
        },
      }).then((res)=>{
        if(res.code !== -1){
          that.startPlay(res.data.flv);
        }
      })
    }
  }
  render() {

    // if(videoDetail.channelId && wasmPlayer){
    //   wasmPlayer.open(videoDetail.flv,1);
    // }
    return (
      <div>
        <video ref={this.state.videoId}>
          {`Your browser is too old which doesn't support HTML5 video.`}
        </video>
      </div>
    )
  }
}
export default CameraPlayer;
